<template xmlns:el-col="http://www.w3.org/1999/html">
  <el-container>
    <el-aside>
      <el-row>
        <el-col>
          <el-row>
            <el-col id="title" >
              <el-icon style="margin-right: 10px;" size="32"><ElementPlus /></el-icon> 河北博软科技
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-menu
                  background-color="#F5EFE6"
                  active-text-color="#6494C5"
                  text-color="#666"
                  style="min-height: 90vh;font-size: 28px;text-align: center"
                  router
                  :default-active="$route.path"
                  default-active="2"
              >

                  <el-menu-item v-show="item!=undefined&&item.routerType===0" v-for="item in routers" @click="addMenu(item.routerName,$event)" class="menu" :index="item.routerPath">
                    <template #title>
                      <img :src="item.routerIcon" style="width: 24px;margin-right: 10px;">     {{item.routerName}}
                    </template>
                  </el-menu-item>
                  <el-sub-menu v-show="item!=undefined&&item.routerType===1" v-for="item in routers" class="menu" :index="item.routerPath">
                    <template #title>
                      <img :src="item.routerIcon" style="width: 24px;margin-right: 10px;">     {{item.routerName}}
                    </template>
                    <el-menu-item  v-show="item2!=undefined&&item2.routerType==0" v-for="item2 in item.child"  @click="addMenu(item2.routerName,$event)" :index="item2.routerPath">
                      <template #title>
                        <img :src="item2.routerIcon" style="width: 24px;margin-right: 10px;">     {{item2.routerName}}
                      </template>
                    </el-menu-item>

                  </el-sub-menu>


              </el-menu>
            </el-col>
          </el-row>

        </el-col>
      </el-row>
    </el-aside>
    <el-container style="background-color: #F2F3F5;">
      <el-header id="header">
      <el-row  style="margin: 12px 0px 0px 4px;justify-content: space-between;">
        <el-col :span="1">
          <el-icon style="font-size: 20px"><Expand /></el-icon>
        </el-col>
        <el-col :span="1" @click="close">
          <el-icon style="font-size: 20px;color: red;cursor: pointer"><SwitchButton /></el-icon>
        </el-col>
      </el-row>
        <el-row >
          <el-col :span="24" style="display: flex">
            <menuTab @remove="remove(index)" @click="clickMenu(index)" v-for="(item,index) in menuInfo"  :check="item.check" :info="item.name"></menuTab>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
      <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup >
import axios from "axios";
import {onMounted, ref} from "vue";
import MenuTab from "../components/menu/menuTab.vue";
import {ArrowUp, ElementPlus, Expand, SwitchButton} from "@element-plus/icons-vue";
import {router} from "../router/index.js";
import {searchUser} from "../request/system/api.js";
import {toStore} from "../stores/counter.js";
import {ElNotification} from "element-plus";
import {getAllRouter, showRouter} from "../request/system/RouterApi.js";
const isCollapse=ref(true)
const menuInfo=ref([])
onMounted(()=> {
if(menuInfo.value.length==0){
  router.push("/admin")
}
loadRouter();
})
const store=toStore()
const close=()=>{
  store.token=""
  localStorage.setItem("store",JSON.stringify(store))
  ElNotification({
    title: '登出',
    message: '已退出系统',
    type: 'success',
  })
  router.push("/")
}
const remove=(index)=>{
    menuInfo.value.splice(index,1);
    router.push("/admin")
}
const addMenu=(info,e)=>{
  let index=-1;
  for (let i = 0; i < menuInfo.value.length; i++) {
    if(menuInfo.value[i].name==info){
      index=i;
      break;
    }
  }
  if(index==-1){
    for (let i = 0; i < menuInfo.value.length; i++) {
      menuInfo.value[i].check = false;
    }
    menuInfo.value.push({name:info,check:true,path:e.index})
  }else {
    clickMenu(index)
    }


}
const clickMenu=(index)=>{
  menuInfo.value[index].check=true;
  router.push(menuInfo.value[index].path)
  for (let i = 0; i < menuInfo.value.length; i++) {
    if(index!=i){
      menuInfo.value[i].check=false;
    }
  }
}
const routers=ref([])
const loadRouter=()=>{
  showRouter().then(response=>{
    routers.value=response.data
    for (let i = 0; i < routers.value.length; i++) {
      if(routers.value[i].routerType==0){
        router.addRoute("admin",{path:routers.value[i].routerPath,component:import("../view/"+routers.value[i].routerComponent)})

      }else {
        for (let j=0;j<routers.value[i].child.length;j++){
          router.addRoute("admin",{path:routers.value[i].child[j].routerPath,component:import("../view/"+routers.value[i].child[j].routerComponent)})
        }
      }

    }
  })
}
</script>

<style scoped>
header,main{
  margin: 0px;
  padding: 0px;
}
router-view{
  height: 100vh;
}
header{
  height: 72px;
  background-color: #fff;
  align-items: flex-end;
  padding: 0px 5px;
}
#title{
  background: #E8DFCA;font-size: 22px;color:#7895B2;
  font-weight: 700;
  display: flex;

  padding: 20px;
  padding-left: 60px;
}

.menu{
  font-size: 16px;
  font-weight: 550;
}
#header{
  position: relative;
  box-shadow: 0px 2px 6px 0px #ccc;
}
#arrowUp{
  position: absolute;
  right: 5%;
  bottom: 10%;
  transition: .2s;
  cursor: pointer;
}
#arrowUp:hover{
  transform: rotate(-180deg);
}
</style>
